import { Text, View } from "native-base";
import React, { Component } from "react";
import { ScrollView, StyleSheet } from "react-native";

interface IProps {
  data: string[];
  active?: string;
}

export default class CategoryList extends Component<IProps> {
  render() {
    const { data = [], active = "" } = this.props;

    return (
      <ScrollView horizontal showsHorizontalScrollIndicator={false}>
        {data.map(d => (
          <Text
            key={d}
            style={[
              styles.text,
              {
                color: d === active ? "#f85959" : "#505050"
              }
            ]}
          >
            {d}
          </Text>
        ))}
      </ScrollView>
    );
  }
}

const styles = StyleSheet.create({
  text: {
    paddingTop: 6,
    paddingBottom: 6,
    paddingLeft: 4,
    paddingRight: 4
  }
});
